import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../../../widgets/app_widgets.dart';
import '../../page_with_title.dart';

///无状态组件示例
class StatelessWidgetPage extends PageWithTitle {
  const StatelessWidgetPage() : super("无状态组件(StatelessWidget)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("作为开发者构建页面最为常用的组件，无状态组件用于构建静态页面，即无需根据变量状"
          "态更新当前组件"),
      LabelText("- 无状态组件不是说当前组件和子组件都不需要根据状态变化来更新，它的子组件中可"
          "以包含状态组件，无状态组件适用于build函数的实现中不需要使用变量来构建组件，子组件使"
          "用状态组件更新状态时导致rebuild时，它只会重建它自身而不影响到我们"),
      AppSpacer.large,
      _Example(),
      UlItem("StatelessWidget"),
      AppSpacer.large,
      OlItem(1, "build"),
      BodyText("继承StatelessWidget需实现该方法，通过Flutter提供的各类组件构建页面"),
      LabelText("我们知道组件构建是通过element的build函数实现的，StatelessElement最终通"
          "过StatelessWidget.build实现组件构建"),
      AppSpacer.large,
      _BuilderExample(),
      UlItem("Builder"),
      BodyText("Flutter提供Builder组件用于取代那些简单的静态组件使用场景，他将build方法通"
          "过回调来构建组件树，从而使开发者可以直接在代码中无需创建新的无状态组件类"),
      LabelText("其实这个很鸡肋，既然要直接使用那我为何不直接就在这构建组建树而跑去嵌套一层"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example() : super(key: null);

  @override
  Widget build(BuildContext context) {
    return const Row(
      children: [
        Icon(Icons.confirmation_num_sharp),
        Text("引用一个图标，这是一个静态组件"),
      ],
    );
  }
}

class _BuilderExample extends StatelessWidget {
  const _BuilderExample();

  @override
  Widget build(BuildContext context) {
    return Builder(
      builder: (context) => const Row(
        children: [
          Icon(Icons.confirmation_num_sharp),
          Text("引用一个图标，这是一个静态组件"),
        ],
      ),
    );
  }
}
